<template>
  <div>
    <navbar theme="light" title="修改密码"></navbar>
    <div class="login-form">
      <div class="form-row">
        <text class="form-row-icon icon text-warning" v-if="hidePwd" @click="toggleHidePwd">&#xe61e;</text>
        <text class="form-row-icon icon text-warning" v-if="!hidePwd" @click="toggleHidePwd">&#xe73c;</text>
        <xinput placeholder="输入旧密码" :value.sync="params.oldPassword" :type="hidePwd ? 'password' : 'text'" class="form-row-control"></xinput>
      </div>
      <div class="form-row">
        <text class="form-row-icon icon text-warning" v-if="hidePwd" @click="toggleHidePwd">&#xe61e;</text>
        <text class="form-row-icon icon text-warning" v-if="!hidePwd" @click="toggleHidePwd">&#xe73c;</text>
        <xinput placeholder="请输入新密码（6-16）位" :value.sync="params.password" maxLength="16"
                :type="hidePwd ? 'password' : 'text'" class="form-row-control"></xinput>
      </div>
      <div class="form-row">
        <text class="form-row-icon icon text-warning" v-if="hidePwd" @click="toggleHidePwd">&#xe61e;</text>
        <text class="form-row-icon icon text-warning" v-if="!hidePwd" @click="toggleHidePwd">&#xe73c;</text>
        <xinput placeholder="再次输入密码" :value.sync="rePassword" maxLength="16"
                @change="rePasswordChange"
                :type="hidePwd ? 'password' : 'text'" class="form-row-control"></xinput>
      </div>
      <div class="form-bottom">
        <text :class="['btn-primary','btn','btn-large', validateOk || 'btn-disabled']"
              @click="modifyPwd">修改密码</text>
      </div>
    </div>
    <div class="footerbar">

    </div>
  </div>
</template>
<script>
require('./include/page-xdom')
let api = require('./include/api')
let urlPath = require('./include/url-path')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
module.exports = {
  mixins: [],
  components: {
    navbar: require('./components/navbar.vue'),
    xinput: require('./components/input.vue')
  },
  data () {
    return {
      logoSrc: urlPath.assets('images/logo_la.png?v=1'),
      hidePwd: true,
      validateOk: false,
      cooldown: 0,
      modifyPwdDoing: false,
      rePassword: '',
      params: {
        oldPassword: '',
        password: ''
      }
    }
  },
  beforeDestroy () {

  },
  created () {
    this.$watch('params', () => {
      this.validateOk = this.validate()
    }, {deep: true})
    this.$watch('rePassword', () => {
      this.validateOk = this.validate()
    })
  },
  methods: {
    toggleHidePwd () {
      this.hidePwd = !this.hidePwd
    },
    validate () {
      if (!this.params.oldPassword) {
        return false
      }
      if (!this.params.password || this.params.password.length < 6) {
        return false
      }
      if (!this.rePassword.length || (this.rePassword.length && this.params.password !== this.rePassword)) {
        return false
      }
      return true
    },
    rePasswordChange (val) {
      if (this.params.password !== val) {
        modal.toast({message: '确认密码输入不正确', duration: 0.5})
      }
    },
    modifyPwd () {
      if (!this.validateOk || this.modifyPwdDoing) {
        return
      }
      this.modifyPwdDoing = true
      api.user.modifyPwd(this.params).done(rs => {
        if (rs.data.success) {
          modal.alert({message: '密码修改成功！'}, () => {
            navigator.pop()
          })
        } else {
          modal.alert({message: rs.data.errMsg}, () => {

          })
        }
      }).always(rs => {
        this.modifyPwdDoing = false
      })
    }
  }
}
</script>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/activeable";
  @import "./sass/form";
  @import "./sass/utilities";

  .container {
    background-color: #FFFFFF;
  }

  .agreement {
    flex-direction: row;
    &-txt {
      font-size: 28px;
      color: $color-muted;
      &-link {
        color: $color-warning;
      }
    }
  }

  .footerbar {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 50px 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    &-icon {
      font-size: 110px;
      &-weixin {
        color: #77bb46;
      }
    }
  }

  .form-row-text {
    margin-top: 30px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 0 15px;
  }

  .sms-switch-btn {
    color: $color-info;
    font-size: 32px;
  }

  .modifyPwd-new-btn {
    color: $color-info;
    font-size: 32px;
  }

  .logo {
    width: 154px;
    height: 154px;
    border-radius: 154px;
    &-wrapper {
      justify-content: center;
      align-items: center;
      height: 180px;
    }
  }

  .login-form {
    padding: 0 40px;
    margin-top: 60px;
  }

  .login-wrap {

  }

  .login-btn {
    flex: 1;
  }
</style>
